<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>JOYRICH 投票页</title>
	<script src="js/wen.js"></script>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/toupiao.css">
</head>
<body class="toupiao">
    <div class="wrap">
        <div class="logo"></div>
        <div class="mian">
            <div class="logo1"></div>
            <div class="logo2"></div>
            <div class="header">
                <div class="sign">
                    <div>
                        <span>已报名</span>
                        <var>1533</var>
                    </div>
                    <div>
                        <span>投票人次</span>
                        <var>16533</var>
                    </div>
                    <div>
                        <span>访问量</span>
                        <var>1613</var>
                    </div>
                </div>
                <div class="search">
                    <div class="sea">
                        <span></span>
                        <div class="inBox">
                            <input type="text" name="" value="" placeholder="搜索名字或编号">
                        </div>   
                    </div>
                </div>
            </div>
            <div class="taptit">
                <span>最新参赛</span>
                <span>男生榜</span>
                <span>女生榜</span>
                <span><a href="">官方V商城</a></span>
            </div>
            <div class="tapcon">
                <div class="conBox" id="conBox">
                    <div class="renBox">
                        <div class="ren">
                            <a href="people.html">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="renBox">
                        <div class="ren">
                            <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="renBox">
                        <div class="ren">
                            <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                        <div class="ren">
                             <a href="">
                                <img src="images/p5_ren.jpg" alt="" title="">
                                <div class="message">
                                    <span>SX</span>
                                    <span>200票</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="seabox" id="seabox"  style="display:none;">
                     <div class="renBox">  
                    </div>
                </div>
            </div>
        </div>
        <div class="baoming">
            <a href="baoming.html">我要报名</a>
        </div>
    </div>
    <script src="js/zepto.min.js"></script>
    <script>
        $(".taptit span").on("touchstart", function() {
            var t = $(this).index();
            if(t < 3) {
                $("#conBox").css({
                    "display": "block",
                    "-webkit-transform" : "translate(-" + 33.33*t + "%,0)"
                }).siblings().css({
                    "display" : "none"
                });
                $(this).css({
                    "box-shadow" : "0 0 2px 2px #2d2d2d",
                }).siblings().css({
                    "box-shadow" : "0 0 1px 1px #2d2d2d",
                })  
            };
        });
        data = [];
           
        $(".sea span").on("touchstart", function(){
            $.ajax({
                type : "get",
                url: "路径",
                data: $(".inBox input").val(),
                success: function(data) {
                   $("#conBox").css({
                        "display": "none"
                   }).siblings().css({
                        "display": "block"
                   }).children(".renBox").html("");
                   if (data.length == 0) {
                       $("#seabox").children(".renBox").html("没有查询到想要的查询的结果");
                   } else {
                    for(i= 0; i<data.length;i++) {
                        searchRen(i);
                    }
                   }
                    function searchRen(i) {
                       var newNode = conBox.children[0].children[0].cloneNode(1);
                       newNode.children[0].href = data[i].lujing + data[i].cid;
                       newNode.children[0].children[0].src = data[i].ctouxiang;
                       newNode.children[0].children[1].children[0].innerHTML = data[i].cname;
                       newNode.children[0].children[1].children[1].innerHTML = data[i].cpiaoshu;
                       seabox.children[0].appendChild(newNode);
                    }
                }
            })
        })
    </script>
</body>
</html>